<template>
  <div>
    <template>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="已签约厂商" name="first">
          <el-card class="box-card">
            <div>
              <!-- 搜索头 -->
              <p>
                <el-input v-model="manufacturerForm.manufacturerCode" placeholder="请输入搜索内容" style="width:300px;border-right: 0px;"></el-input>
                <el-button @click="listManuFacturer"  icon="el-icon-search"></el-button>
                <span style="font-size: 10px;margin-left:10px">厂商类型:</span>
                <el-select v-model="manufacturerForm.manufacturerType" @change="listManuFacturer" placeholder="请选择" style="width: 130px">
                  <el-option value="全部" checked>全部</el-option>
                  <el-option value="0" label="预付费型">预付费型</el-option>
                  <el-option value="1" label="固定结算型">固定结算型</el-option>
                </el-select>
                <span style="font-size: 10px;margin-left:10px">签约部门:</span>
                <el-select v-model="manufacturerForm.manufacturerUseType" @change="listManuFacturer" placeholder="请选择" style="width: 130px">
                  <el-option value="全部" checked>全部</el-option>
                  <el-option value="0" label="使用中">使用中</el-option>
                  <el-option value="1" label="已停用">已停用</el-option>
                </el-select>
                <el-button @click="openAddFacturerCode"  icon="el-icon-plus">新增签约</el-button>
              </p>
              <!-- 搜索头 -->
              <el-row :span="19" type="flex">
                <el-col>
                  <el-table
                      :data="listFiles"
                      style="width: 100%;height:650px">
                    <el-table-column
                          prop="manufacturerCode"
                          :class="SpanClass"
                          style="color: red"
                          label="厂商编号"
                          width="160">
                      </el-table-column>
                      <el-table-column
                          label="厂商名称"
                          prop="manufacturerName"
                          width="110">
                      </el-table-column>
                      <el-table-column
                          label="厂商类型"
                          width="130">
                        <template slot-scope="scope">
                          <span>{{scope.row.manufacturerType===0?"预付费型":scope.row.manufacturerType===1?"预付费型":"暂未分配"}}</span>
                        </template>
                      </el-table-column>
                    <el-table-column
                        prop="manufacturerName"
                        label="签约部门"
                        width="110">
                    </el-table-column>
                      <el-table-column
                          prop="manufacturerPhone"
                          label="厂商电话"
                          width="160">
                      </el-table-column>
                      <el-table-column
                          label="余额"
                          width="150">
                        <template slot-scope="scope">
                          <span style="color: blue" @click="ManuFacturerOne(scope.row.id)">{{scope.row.manufacturerMonery}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                          prop="createTime"
                          label="签约时间"
                          width="160">
                      </el-table-column>
                      <el-table-column
                          label="使用状态"
                          width="90">
                        <template slot-scope="scope">
                          <el-tag :type="scope.row.manufacturerUseType===0?'success':'danger'">{{scope.row.manufacturerUseType===0?"使用中":"已停用"}}</el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column
                          fixed="right"
                          label="操作">
                        <template slot-scope="scope">
                          <el-popconfirm
                              v-if="scope.row.manufacturerUseType===0"
                              confirm-button-text='停用'
                              cancel-button-text='取消'
                              icon="el-icon-info"
                              @confirm=closeManuFacturer(scope.row)
                              icon-color="red"
                              title="确定将此厂商停用？">
                            <el-button slot="reference" size="small"><span>停用</span></el-button>
                          </el-popconfirm>
                          <el-popconfirm
                              v-if="scope.row.manufacturerUseType===1"
                              confirm-button-text='停用'
                              cancel-button-text='取消'
                              icon="el-icon-info"
                              @confirm=closeManuFacturer(scope.row)
                              icon-color="blue"
                              title="确定将此厂商启用？">
                            <el-button slot="reference" size="small"><span>启用</span></el-button>
                          </el-popconfirm>
                          <el-popconfirm
                              confirm-button-text='解约'
                              cancel-button-text='取消'
                              icon="el-icon-info"
                              @confirm=jieyueFacture(scope.row)
                              icon-color="blue"
                              title="确定将此厂商解约？">
                            <el-button slot="reference" size="small"><span>解约</span></el-button>
                          </el-popconfirm>
                        </template>
                      </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
              <!-- 分页开始 -->
              <div class="block" style="margin-top: 20px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20]"
                    :page-size=pageSize
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=total>
                </el-pagination>
              </div>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="自行注册厂商" name="second">
          <el-card class="box-card">
            <div>
              <!-- 搜索头 -->
              <p>
                <el-input placeholder="请输入搜索内容" style="width:300px;border-right: 0px;"></el-input>
                <el-button @click="listNoManuFacturer"  icon="el-icon-search"></el-button>
              </p>
              <!-- 搜索头 -->
              <el-row :span="19" type="flex">
                <el-col>
                  <el-table
                      :data="listNoFiles"
                      style="width: 100%;height:650px">
                    <el-table-column
                        prop="manufacturerCode"
                        :class="SpanClass"
                        style="color: red"
                        label="厂商编号"
                        width="160">
                    </el-table-column>
                    <el-table-column
                        label="厂商名称"
                        width="110">
                      <template slot-scope="scope">
                        <span style="color: blue" @click="openOneDealManuFacturer(scope.row)">{{scope.row.manufacturerName}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                        label="厂商类型"
                        width="130">
                      <template slot-scope="scope">
                        <span>{{scope.row.manufacturerType===0?"预付费型":scope.row.manufacturerType===1?"预付费型":"暂未分配"}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                        prop="manufacturerName"
                        label="签约部门"
                        width="110">
                    </el-table-column>
                    <el-table-column
                        prop="manufacturerPhone"
                        label="厂商电话"
                        width="160">
                    </el-table-column>
                    <el-table-column
                        prop="manufacturerMonery"
                        label="余额"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        prop="createTime"
                        label="签约时间"
                        width="160">
                    </el-table-column>
                    <el-table-column
                        label="使用状态"
                        width="90">
                      <template slot-scope="scope">
                        <el-tag :type="scope.row.manufacturerDelType===2?'success':scope.row.manufacturerDelType===1?'danger':''">{{scope.row.manufacturerDelType===2?"已通过":scope.row.manufacturerDelType===1?"已驳回":'未处理'}}</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作">
                      <template slot-scope="scope">
                        <el-button @click="openDealFacturerCode(scope.row)"  v-if="scope.row.manufacturerDelType===0">处理</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
              <!-- 分页开始 -->
              <div class="block" style="margin-top: 20px;">
                <el-pagination
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20]"
                    :page-size=pageSize2
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=total2>
                </el-pagination>
              </div>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </template>
    <!--签约-->
    <el-dialog
        title="新增签约"
        :visible.sync="AddFacturerCodeWindow"
        width="50%"
        :before-close="handleClose">
        <div id="WindowsHeight">
          <p style="margin-left: 10px;font-size: 10px">
            签约公司:
            <el-select id="AddSelect" v-model="contractId">
              <el-option
                  v-for="item in listNoFilesNoPage"
                  :label="item.manufacturerName"
                  :value="item.id"
              ></el-option>
            </el-select>
            <span style="font-size: 10px;margin-left: 20px">
            签约开始时间:
            <el-date-picker
                v-model="contractStartDate"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择签约日期">
            </el-date-picker>
          </span>
            <span style="font-size: 10px;margin-left: 20px">
            签约结束时间:
            <el-date-picker
                v-model="contractEndDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择签约日期">
            </el-date-picker>
          </span>
          </p>
        </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="AddFacturerCodeWindow = false">取 消</el-button>
    <el-button type="primary" @click="contractManuFacturer">签 约</el-button>
  </span>
    </el-dialog>
    <!--签约-->
    <!--处理-->
    <el-dialog
        title="自主注册厂商处理"
        :visible.sync="DealFacturerCodeWindow"
        width="50%"
        :before-close="handleClose">
          <div class="windowTop"  style="border-bottom: 0px">
            <p style="margin-left: 650px">{{this.DealForm.manufacturerDelType===0?'未处理':'已处理'}}</p>
          </div>
          <div class="windowTop" style="height: 200px;border-bottom: 0px">
            <p style="margin-left: 10px;font-size: 10px">
              处理内容:
              <el-select v-model="manufacturerDelType" placeholder="请选择">
                <el-option
                    label="驳回"
                    value="1">
                </el-option>
                <el-option
                    label="同意"
                    value="2">
                </el-option>
              </el-select>
              <br>
              <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="manufacturerDelMessage"
                  maxlength="30"
                  style="margin-top: 20px"
                  :autosize="{ minRows: 6, maxRows: 10}"
                  show-word-limit></el-input>
            </p>
          </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="DealFacturerCodeWindow = false">取 消</el-button>
        <el-button type="primary" @click="DealManuFacturer">处 理</el-button>
      </span>
    </el-dialog>
    <!--处理-->
    <!--自注册单查-->
    <el-dialog
        title="自主注册厂商处理"
        :visible.sync="DealOneFacturerCodeWindow"
        width="50%"
        :before-close="handleClose">
      <div class="windowTop">
        <p style="margin-left: 650px">{{this.DealForm.manufacturerDelType===0?'未处理':'已处理'}}</p>
      </div>
      <div class="windowTop" style="height: 140px;">
        <ul type="none" class="windowOneUl">
          <li>厂商名称: {{DealOneForm.manufacturerName}}</li>
          <li>联系人名称: {{DealOneForm.manufacturerUsername}}</li>
          <li>产品区域: {{DealOneForm.manufacturerName}}</li>
        </ul>
        <ul type="none" class="windowOneUl">
          <li>产品编号: {{DealOneForm.manufacturerCode}}</li>
          <li>联系人电话: {{DealOneForm.manufacturerUserphone}}</li>
        </ul>
        <ul type="none" class="windowOneUl">
          <li>产品品类: {{DealOneForm.manufacturerType}}</li>
          <li>注册时间: {{DealOneForm.createTime}}</li>
        </ul>
      </div>
      <div class="windowTop" style="height: 70px;border-bottom: 0px">
        <ul type="none" class="windowOneUl">
          <li>处理人: {{DealOneForm.manufacturerName}}</li>
          <li>处理内容: {{DealOneForm.manufacturerDelMessage}}</li>
        </ul>
        <ul type="none" class="windowOneUl">
          <li>处理时间: {{DealOneForm.updateTime}}</li>
        </ul>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="DealOneFacturerCodeWindow = false">取 消</el-button>
      </span>
    </el-dialog>
    <!--自注册单查-->
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Test",
  data () {
    return{
      activeName: 'first',
      listFiles: [], // 已签约厂商全查
      listNoFiles: [], // 未签约厂商全查
      listNoFilesNoPage: [], // 未签约厂商全查无分页
      contractStartDate: '', // 签约开始时间
      contractEndDate: '', // 签约结束时间
      contractId: '', // 签约公司id
      SpanClass: 'redSpan',
      DealForm: {}, // 处理表单
      DealOneForm: {}, // 处理单查信息
      manufacturerDelMessage: '', // 处理备注
      DealOneFacturerCodeWindow: false,
      AddFacturerCodeWindow: false,
      DealFacturerCodeWindow: false,
      pageSize: 5,
      total: 0,
      pageNum: 1,
      pageSize2: 5,
      total2: 0,
      pageNum2: 1,
      currentPage: 0,
      manufacturerDelType: '',
      manufacturerForm: {
        manufacturerType: '全部',
        manufacturerCode: '',
        manufacturerUseType: '全部'
      }
    }
  },
  mounted() {
    this.listManuFacturer()
    this.listNoManuFacturer()
    this.listNoManuFacturerNoPage()
  },
  methods:{
    myMessage (type, message) { // 弹窗提示
      this.$message({
        message: message,
        type: type
      })
    },
    jieyueFacture(data){
      console.log(data.id)
      this.request.delete('/memberZjx/manuFacturerController/jieyueFactur',{
        params:{
          id: data.id
        }
      }).then(res => {
        if (res){
          this.listManuFacturer()
          this.myMessage('success','解约成功')
        }else{
          this.myMessage('info','网络异常')
        }
      })
    },
    ManuFacturerOne (data) {
      this.$router.push({path:'ManuFacturerOrders',query:{id: data}})
    },
    openAddFacturerCode () {
      this.listNoManuFacturerNoPage()
      this.contractStartDate = ''
      this.contractId = ''
      this.contractEndDate = ''
      this.AddFacturerCodeWindow = true
    },
    openOneDealManuFacturer (data) {
      console.log(data)
      this.DealOneForm = data
      this.DealOneFacturerCodeWindow = true
    },
    openDealFacturerCode (data) {
      this.DealForm = data
      this.DealFacturerCodeWindow = true
    },
    DealManuFacturer () { // 处理
      if(this.manufacturerDelType === ''){
        this.myMessage('error','请选择审核状态')
      }else{
        this.request.get('/memberZjx/manuFacturerController/dealManuFacturer',{
          params:{
            id: this.DealForm.id,
            manufacturerDelMessage: this.manufacturerDelMessage,
            manufacturerDelType: this.manufacturerDelType
          }
        }).then(res=>{
          if (res){
            this.listNoManuFacturer()
            this.myMessage('success','处理成功')
            this.DealFacturerCodeWindow = false
            this.listNoManuFacturerNoPage()
          }else{
            alert("失败！")
          }
        })
      }
    },
    closeManuFacturer(data){ // 启用/停用 厂商
      this.request.delete('/memberZjx/manuFacturerController/closeManuFacturer',{
        params:{
          id: data.id,
          manufacturerUseType: data.manufacturerUseType
        }
      }).then(res=>{
        if (res){
          this.listManuFacturer()
          if(data.manufacturerUseType === 0){
            this.myMessage('success','停用成功')
          }else{
            this.myMessage('success','启用成功')
          }
        }else{
          this.myMessage('error','系统错误')
        }
      })
    },
    contractManuFacturer(){ // 签约公司
      this.request.get('/memberZjx/manuFacturerController/contractManuFacturer',{
        params:{
          id: this.contractId,
          contractStartDate: this.contractStartDate,
          contractEndDate: this.contractEndDate
        }
      }).then(res=>{
        if (res){
          this.listManuFacturer()
          this.myMessage('success','签约成功')
          this.AddFacturerCodeWindow = false
        }else{
          alert("失败！")
        }
      })
    },
    listNoManuFacturerNoPage(){ // 自行注册厂商未签约全查
      this.request.get('/memberZjx/manuFacturerController/listNoPage').then(res=>{
        if (res){
          this.listNoFilesNoPage = res.data
        }else{
          alert("失败！")
        }
      })
    },
    listNoManuFacturer(){ // 自行注册厂商未签约全查
      this.request.get('/memberZjx/manuFacturerController/listNo',{
        params:{
          manufacturerCode: this.manufacturerForm.manufacturerCode,
          manufacturerType: this.manufacturerForm.manufacturerType,
          manufacturerUseType: this.manufacturerForm.manufacturerUseType,
          pageSize: this.pageSize2,
          pageNum: this.pageNum2
        }
      }).then(res=>{
        if (res){
          this.listNoFiles = res.data.records
          this.total2 = res.data.total
        }else{
          alert("失败！")
        }
      })
    },
    listManuFacturer(){ // 厂商全查
      this.request.get('/memberZjx/manuFacturerController/list',{
        params:{
          manufacturerCode: this.manufacturerForm.manufacturerCode,
          manufacturerType: this.manufacturerForm.manufacturerType,
          manufacturerUseType: this.manufacturerForm.manufacturerUseType,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        }
      }).then(res=>{
        if (res){
          this.listFiles = res.data.records
          this.total = res.data.total
        }else{
          alert("失败！")
        }
      })
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    handleSizeChange (val) { // 页码
      this.pageSize = val
      this.listManuFacturer()
    },
    handleCurrentChange (val) { // 页数
      this.pageNum = val
      this.listManuFacturer()
    },
    handleSizeChange2 (val) { // 页码
      this.pageSize2 = val
      this.listNoManuFacturer()
    },
    handleCurrentChange2 (val) { // 页数
      this.pageNum2 = val
      this.listNoManuFacturer()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
  }
}
</script>

<style scoped>
#AddSelect{
  margin-left:450px;
}
.windowTopSpan{
  font-size: 10px;
  margin-left: 100px;
}
.windowOneUl{
  float: left;
  margin-left: 20px;
}
.windowOneUl>li{
  margin-top: 15px;
}
.windowTop{
  width: 80%;
  height: 20px;
  margin: 0 auto;
  border-bottom: 1px solid;
}
#WindowsHeight{
  height:300px
}
</style>
